<!--  -->
<template>
   <el-dialog
    v-model="dialogVisible"
    :title="model.title"
    width="800"
    :before-close="handleClose"
  >

 <div class="title">
    发布时间: {{ model.addtime }}
 </div>
 <div class="content" v-html="model.content">
 </div>
  </el-dialog>
</template>

<script lang='ts' setup>
import { getNews } from '../../service/news/news';
import { number } from 'echarts';
import { defineProps,defineEmits,ref,onMounted, reactive, toRefs} from 'vue'
const dialogVisible=ref(true);
const emit=defineEmits(["close"]);
const handleClose=()=>{
    emit("close");
}

const props=defineProps({
    id:{
        type:Number,
        require:true
    }
})
const state=reactive({
    model:{
        id: 0,
    title:"",
    picture:"",
    edituser:"",
    state:null,
    type:null,
    hits: 0,
    content:"",
    addtime:""
    }
})
const {model}=toRefs(state);
const getData=async ()=>{

     const res:any=await getNews(props.id!);

     if(res.errCode===10000){
         state.model=  res.data;

         if(state.model.content && state.model.content.indexOf("<img")!=-1){

            state.model.content= state.model.content.replace(/<img/g,"<img style='max-width:100%'")
         }
     }
}
onMounted(()=>{
    getData();
})
</script>
<style scoped>
.title{
    border-bottom: solid 1px #ddd;
    line-height: 50px;
    text-align: center;
}
.content{
    padding: 20px;
}
</style>